import "./discover.scss"
import { connect } from "react-redux";
import { getCategories, getDiscover, getUser, setTheme, removeTheme, removePgc, setPgc, setAuthorAndPgc, setThemeAndVideos } from "../../action/action";
import { Link } from 'react-router-dom';
import { setCookie } from "../../js/cookie";
import { getCookie } from './../../js/cookie';
import { Toast } from 'antd-mobile';
import { PullToRefresh } from 'antd-mobile';
@connect(
    (state) => {
        return {
            discover: state.discover,
            userData: state.my.userData
        }
    }
)
export class Discover extends React.Component {
    state = {
        refreshing: false,
        down: true,
        height: document.documentElement.clientHeight,
        data: [],
    }
    componentDidMount() {
        let { dispatch } = this.props;
        dispatch(getCategories())
        dispatch(getDiscover())
        dispatch(getUser(getCookie("ky_uid"), (data) => { }));
    }
    setAtt(id, theme) {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            if (theme.indexOf(id) == -1) {
                dispatch(setTheme(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
                dispatch(setThemeAndVideos(id))
            } else {
                dispatch(removeTheme(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            }
        } else {
            Toast.info("未登录，请先登录");
        }
    }
    setAttPgc(id, pgc) {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            if (pgc.indexOf(id) == -1) {
                dispatch(setPgc(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
                dispatch(setAuthorAndPgc(id))
            } else {
                dispatch(removePgc(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            }
        } else {
            Toast.info("未登录，请先登录");
        }
    }
    rank() {
        setCookie("ky_history_url", this.props.match.url, 7);
        this.props.history.push("/rank");
    }
    render() {
        let { discoverData, categoriesData } = this.props.discover;
        let { userData } = this.props;
        let HorizontalScrollCard = null;
        let discoverHot = null;
        let columnCardList = null;
        let squareCardOfColumn = null;
        let themeTitle = null;
        let themeInfo = [];
        let authorTitle = null;
        let authorInfo = [];
        let categories = [];
        if (discoverData) {
            // 发现页面的轮播图的数据很乱，对应不上，暂时不写
            // HorizontalScrollCard = discoverData.itemList[0].data.itemList.map((item, index) => (
            //     <div className="slide-item" key={index}>
            //         <img src={item.data.image} />
            //     </div>
            // ));
            discoverData.itemList.map((item, index) => {
                if (index == 7) {
                    if (item.type === "textCard") {
                        themeTitle = (
                            <div className="title" key={index}>
                                <h3>{item.data.text}</h3>
                                {/* 暂时不写 */}
                                {/* <a>{item.data.rightText} &gt;</a> */}
                            </div>
                        )
                    }
                }
                if (8 <= index && index <= 12) {
                    themeInfo.push(
                        <li key={index}>
                            <div className="info cl">
                                <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/detail/dtrec/" + item.data.id); }}>
                                    <div className="via">
                                        <img src={item.data.icon} />
                                    </div>
                                    <div className="msg">
                                        <h4>{item.data.title}</h4>
                                        <p>{item.data.description}</p>
                                    </div>
                                </a>
                                <span onClick={() => { userData ? this.setAtt(item.data.id, userData.result.uatt_theme) : Toast.info("未登录，请先登录", 1) }}>{userData && userData.result.uatt_theme.indexOf(item.data.id) != -1 ? "已关注" : "+关注"}</span>
                            </div>
                        </li>
                    )
                }
                if (index == 13) {
                    authorTitle = (
                        <div className="title" key={index}>
                            <h3>{item.data.text}</h3>
                            {/* 暂时不写 */}
                            {/* <a>{item.data.rightText} &gt;</a> */}
                        </div>
                    )
                }
                if (14 <= index && index <= 18) {
                    authorInfo.push(
                        <li key={index}>
                            <div className="info cl">
                                <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.data.id); }}>
                                    <div className="via">
                                        <img src={item.data.icon} />
                                    </div>
                                    <div className="msg">
                                        <h4>{item.data.title}</h4>
                                        <p>{item.data.description}</p>
                                    </div>
                                </a>
                                <span onClick={() => { userData ? this.setAttPgc(item.data.id, userData.result.uatt_pgc) : Toast.info("未登录，请先登录", 1) }}>{userData && userData.result.uatt_pgc.indexOf(item.data.id) != -1 ? "已关注" : "+关注"}</span>
                            </div>
                        </li >
                    )
                }
            })
            discoverHot = (
                <div className="title">
                    <h3>{discoverData.itemList[1].data.text}</h3>
                    {/* <a>{discoverData.itemList[5].data.text} &gt;</a> */}
                </div>
            )
            columnCardList = (
                <div className="title">
                    <h3>{discoverData.itemList[6].data.header.title}</h3>
                </div>
            )
            squareCardOfColumn = discoverData.itemList[6].data.itemList.map((item, index) => {
                //还有两个栏目暂时先放着
                if (index > 1) {
                    return (
                        <li key={index}>
                            <a onClick={() => { index == 3 ? this.props.history.push("/bbs") : this.rank() }} >
                                <img src={item.data.image} />
                                <div>
                                    <p>{item.data.title}</p>
                                    <span>{item.data.description}</span>
                                </div>
                            </a>
                        </li >
                    )
                }
            });

        }
        if (categoriesData) {
            categoriesData.itemList.map((item, index) => {
                if (index > 2) {
                    categories.push(
                        <li className="slide-item" key={index}>
                            <Link to={"/detail/dtrec/" + item.data.id} onClick={setCookie("ky_history_url", this.props.match.url, 7)}><img src={item.data.image} />
                                <span>{item.data.title}</span>
                            </Link>
                        </li>
                    )
                }
            })
        }
        return (
            <PullToRefresh
                damping={60}
                ref={el => this.ptr = el}
                style={{
                    height: this.state.height,
                    overflow: 'auto',
                }}
                indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                direction={this.state.down ? 'down' : 'up'}
                refreshing={this.state.refreshing}
                onRefresh={() => {
                    this.setState({ refreshing: true });
                    setTimeout(() => {
                        location.reload()
                        this.setState({ refreshing: false });
                    }, 1000);
                }}
            >
                <div className="discover">
                    <div className="header">
                        {/* 发现页面的轮播图的数据很乱，对应不上，暂时不写 */}
                        {/* <div className="imgs">
                        <div className="slide-box">
                            {HorizontalScrollCard}
                        </div>
                    </div> */}
                    </div>
                    <div className="classify">
                        {discoverHot}
                        <div className="imgs">
                            <ul className="slide-box cl">
                                {categories}
                            </ul>
                        </div>
                    </div>
                    <div className="column">
                        {columnCardList}
                        <ul className="cl">
                            {squareCardOfColumn}
                        </ul>
                    </div>
                    <div className="theme">
                        {themeTitle}
                        <ul>
                            {themeInfo}
                        </ul>
                    </div>
                    <div className="author">
                        {authorTitle}
                        <ul>
                            {authorInfo}
                        </ul>
                    </div>
                </div>
            </PullToRefresh>
        )
    }
}